<script setup>
import { reactive, shallowReactive, ref, shallowRef,onUpdated} from "vue"
const data1 = reactive({ a: 1, b: { c: 2 } })
const data2 = shallowReactive({ a: 1, b: { c: 2 } })
const data3 = ref({ a: 1, b: { c: 2 } })
const data4 = shallowRef({ a: 1, b: { c: 2 } })



const changeData = () => {
    console.log("执行了~");
    // 分别注释修改
    // data1.a += 1
    // data1.b.c += 1
    data2.a += 1
    data2.b.c += 1
    // data3.value.a += 1
    // data3.value.b.c += 1
    // data4.a += 1
    // data4.value.b.c += 1
}

onUpdated(() => {
    console.log(data3);
})
</script>

<template>
    <section>
        <h2>reactive</h2><span>{{ data1 }}</span>
    </section>
    <section>
        <h2>shallowReactive</h2><span>{{ data2 }}</span>
    </section>
    <section>
        <h2>ref</h2><span>{{ data3 }}</span>
    </section>
    <section>
        <h2>shallowRef</h2><span>{{ data4 }}</span>
    </section>
    <button @click="changeData">修改数据</button>
</template>

